<template>
  <div class="playlist">
    <div class="playlist_title">
      <div class="playlist_img">
        <img src="../../../assets/logo.png" alt />
      </div>
      <div class="playlist_title_right">
        <div class="title">错过我们终究错过</div>
        <div class="playlist_title_icon">
          <img src="../../../assets/logo.png" />
          <span>原创君</span>
          <span class="yc">2020-2-26创建</span>
        </div>
        <div class="buttom">
          <span class="el-icon-video-play"></span> 播放全部
        </div>
        <div class="playlist_text">
          <div>
            标签:
            <span>华语/怀旧/感动</span>
          </div>
          <p>
            简历:
            <span>
              奋斗拼搏了那么久，期待盼望了那么久，你所有的付出都将会在这个季节得到你应有的回报。满意的分数，梦想的大学，向往的城市，还有想见的人，希望一切都顺顺利利的进行着，你一定可以金榜题名！你们的微笑都会被写在脸上，当双手捧起录取通知书看见自己名字的那一刻，这将会是这一整个夏天最值得、最耀眼和最美好的时刻！
              考得上/你可以/我们更高处见
            </span>
          </p>
        </div>
      </div>
    </div>
    <!-- tab -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="歌曲列表" name="first">
        <div class="LatestMusic_body">
          <span style="margin-left:100px;">音乐标题</span>
          <span>歌手</span>
          <span>专辑</span>
          <span>时长</span>
        </div>
        <ul>
          <li class="LatestMusic_list">
            <span>index+1</span>
            <div class="LatestMusic_list_icon">
              <span class="el-icon-video-play"></span>
              <img src="item.album.picUrl" width="60px" />
            </div>
            <div class="LatestMusic_list_title">
              <p>
                item.name
                <span class="el-icon-video-camera-solid"></span>
              </p>
              <p>item.album.company</p>
            </div>
            <div class="LatestMusic_list_name">item.artists[0].name</div>
            <div class="LatestMusic_list_zj">item.album.name</div>
            <div class="LatestMusic_list_time">item.duration</div>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="评论(66)" name="second">评论(66)</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "second",
    };
  },
  watch: {
    $route(val) {
      // 监视是否有改变
      this.routeId();
    },
  },
  methods: {
    handleClick(val) {
      console.log(val);
    },
    // 判断跳转过来的时候是否携带参数
    routeId() {
      if (!this.$route.query.id) {
        this.$router.push("/");
      }
    },
    // 获取歌单数据
    singsAxios() {
      this.$http({
        method: "get",
        url: "/playlist/detail",
        params: {
          id: this.$route.query.id,
        },
      }).then((res) => {
        console.log(res);
      });
    },
  },
  created() {
    // 进入页面就判断
    this.routeId();
    // 获取歌单数据
    this.singsAxios();
  },
};
</script>

<style lang="less" scoped>
.playlist {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  .playlist_title {
    width: 1000px;
    margin-top: 30px;
    display: flex;
    .playlist_img {
      width: 200px;
      height: 200px;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .playlist_title_right {
      flex: 1;
      margin-left: 30px;
      .title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: 550;
      }
      .playlist_title_icon {
        width: 100%;
        margin: 10px 0;
        display: flex;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 10px;
        }
        span {
          display: inline-block;
          margin-right: 12px;
          font-size: 16px;
          font-weight: 550;
        }
        .yc {
          flex: 1;
          font-size: 14px;
          font-weight: 500;
        }
      }
      .buttom {
        width: 100px;
        height: 30px;
        background-color: rgb(233, 98, 68);
        color: #fff;
        text-align: center;
        line-height: 30px;
        font-size: 15px;
        border-radius: 5px;
        cursor: pointer;
      }
      .playlist_text {
        > div {
          margin: 20px 0;
          font-size: 15px;
          font-weight: 550;
          > span {
            font-weight: 500;
          }
        }
        > p {
          font-size: 15px;
          font-weight: 550;
          > span {
            font-size: 13px;
            font-weight: 550;
          }
        }
      }
    }
  }
}
.LatestMusic_list {
  display: flex;
  height: 60px;
  align-items: center;
  border-radius: 15px;
  > span {
    display: block;
    width: 50px;
    margin-left: 25px;
    font-size: 15px;
  }
  .LatestMusic_list_icon {
    width: 60px;
    height: 60px;
    display: flex;
    position: relative;
    justify-content: center;
    border-radius: 10px;
    margin-right: 60px;
    > span {
      position: absolute;
      width: 60px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      background-color: rgba(126, 119, 120, 0.3);
      color: #fff;
      font-size: 14px;
      display: none;
      border-radius: 10px;
    }
    img {
      display: block;
      border-radius: 10px;
    }
  }
  .LatestMusic_list_icon:hover span {
    display: block;
  }
  .LatestMusic_list_title {
    height: 60px;
    width: 130px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    p:nth-child(1) {
      font-size: 13px;
      span {
        font-size: 13px;
        color: rgb(199, 13, 13);
      }
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    p:nth-child(2) {
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    margin-right: 100px;
  }
  .LatestMusic_list_name {
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin-right: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .LatestMusic_list_zj {
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin-right: 155px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .LatestMusic_list_time {
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
}
.LatestMusic_list:hover {
  background-color: rgba(97, 85, 87, 0.2);
}
.LatestMusic_body {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  height: 40px;
  span {
    font-size: 15px;
    line-height: 40px;
  }
}
li {
  list-style-type: none;
  margin-top: 10px;
}
</style>